<template>
  <div class="bj">
    <div style="background: rgba(0, 0, 0, 0.4); height: 100%; width: 100%">
      <el-row :gutter="10" class="m-0 po_r">
        <el-col
          :xs="24"
          :sm="24"
          :md="12"
          :lg="12"
          :xl="12"
          class="el_col_style"
        >
          <div class="container" style="backfround: rgb(255, 255, 255, 0.5)">
            <div v-for="headers in header" :key="headers.headerid">
              <h1 :class="h1">{{ headers.headertitle }}</h1>
            </div>
            <div class="my-2">
              <div v-for="users in user" :key="users.userid">
                <div>
                  <a
                    class="qqImgLogo"
                    :href="
                      'tencent://AddContact/?fromId=45&fromSubId=1&subcmd=all&uin=' +
                      users.userqq +
                      '&website=www.oicqzone.com'
                    "
                    ><el-avatar
                      :src="
                        'http://q2.qlogo.cn/headimg_dl?dst_uin=' +
                        users.userqq +
                        ' &spec=100'
                      "
                    ></el-avatar
                  ></a>
                </div>
                <h2 class="my-2" :class="h2">{{ users.username }}</h2>
                <h4 class="my-2" :class="h3">{{ users.usermotto }}</h4>
              </div>
              <div>
                <el-row :gutter="20" class="m-0">
                  <el-col
                    class="my-1"
                    v-for="urls in url"
                    :key="urls.urlid"
                    :xs="24"
                    :sm="12"
                    :md="12"
                    :lg="6"
                    :xl="6"
                  >
                    <a :href="urls.urlurl">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="urls.urlmessage"
                        placement="top"
                      >
                        <el-button type="primary" round>{{
                          urls.urlname
                        }}</el-button>
                      </el-tooltip>
                    </a>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!-- 页脚 -->
            <div class="unions">
              <div>
                <el-row :gutter="10" class="m-0">
                  <div v-for="unionsss in unionss" :key="unionsss.unionssid">
                    <el-col :xs="6" :sm="6" :md="12" :lg="4" :xl="4">
                      <!-- <a href=""> -->
                      <el-link
                        :href="unionsss.unionsurl"
                        type="info"
                        class="unionsssa"
                        >{{ unionsss.unionsname }}</el-link
                      >
                      <!-- </a> -->
                    </el-col>
                  </div>
                </el-row>
              </div>
              <div class="foot">
                <div>
                  <div v-for="foots in foot" :key="foots.footid">
                    <!-- <a href=""> -->
                    <!-- <div class="footdiv">{{ foots.foottitle }}</div> -->
                    <!-- <div class="footdiv">{{ foots.footinformation }} <el-link href="#" type="info">{{ foots.footauthor }}</el-link></div> -->
                    <div class="footdiv">
                      <el-link :href="foots.footicpurl" type="info">{{
                        foots.footicp
                      }}</el-link>
                    </div>
                    <!-- <div class="footdiv"><el-link :href="foots.footrecordurl" type="info">{{ foots.footrecord }}</el-link></div> -->
                    <!-- </a> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.headers();
      vm.urls();
      vm.users();
      vm.unions();
      vm.foots();
    });
  },
  data() {
    return {
      h1: "h1_1",
      h2: "h2_1",
      h3: "h3_1",
      header: [{}],
      user: [{}],
      url: [{}],
      unionss: [{}],
      foot: [{}],
    };
  },
  methods: {
    headers() {
      this.axios({
        method: "post",
        url: this.$constant.url + "/header/queryAllHeader",
      }).then(({ data }) => {
        if (data.code == 100) {
          this.header = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
    urls() {
      this.axios({
        method: "post",
        url: this.$constant.url + "/url/queryAllUrl",
      }).then(({ data }) => {
        if (data.code == 100) {
          this.url = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
    users() {
      this.axios({
        method: "post",
        url: this.$constant.url + "/user/queryAllUser",
      }).then(({ data }) => {
        if (data.code == 100) {
          this.user = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
    unions() {
      this.axios({
        method: "post",
        url: this.$constant.url + "/unions/queryAllUnions",
      }).then(({ data }) => {
        if (data.code == 100) {
          this.unionss = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
    foots() {
      this.axios({
        method: "post",
        url: this.$constant.url + "/foot/queryAllFoot",
      }).then(({ data }) => {
        if (data.code == 100) {
          this.foot = data.data;
        } else {
          alert(data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.po_r {
  position: relative;
}
.bj {
  background: url(http://sh.qemao.com/tools/home/adad/images/51290b9fb3b08b5ca7baa78147bf2b44.webp);
  height: 100%;
  opacity: 0.95;
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  text-align: center;
}
.my-1 {
  margin-top: 1em;
  margin-bottom: 1em;
}
.my-2 {
  margin-top: 2em;
  margin-bottom: 2em;
}
.el-avatar {
  width: 100px;
  height: 100px;
  border: 4px solid #fff;
  display: block;
  margin: 0 auto;
}
.el-button {
  width: 100%;
}
.h1_1 {
  color: #f2f6fc;
  letter-spacing: 10px;
  text-align: center;
}
.h2_1 {
  color: #f2f6fc;
  letter-spacing: 4px;
  text-align: center;
}
.h3_1 {
  color: #f2f6fc;
  letter-spacing: 4px;
  text-align: center;
}
.ml-1 {
  margin-left: 1em;
}
.qqImgLogo {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}
.m-0 {
  margin: 0 !important;
}
.el_col_style {
  margin: 0 auto;
  float: none;
}
.unions {
  margin: 10% 0;
}
.unionsssa{
  color: #bec2ca;
  letter-spacing: 10px;
}
.unionsssa:hover {
  color: #ffffff;
}
.foot {
  position: absolute;
  bottom: 0;
  height: 40px;
  line-height: 20px;
  left: 45%;
  text-align: center;
  color: #ccc;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.footdiv {
  text-align: center;
  color: #909399;
}
</style>
